<template>
	<view>
		<view class="home-container" :class="skinStyle">
			<template v-if="isSearch">
				<view class="base-search-header"
					@tap="navTo('/packageA/pages/productList/productList?selectedIndex=0')">
					<view class="notice-box" @tap="navTo('/packageB/pages/noticePage/noticePage', { login: true })">
						<view class="iconfont iconlingdang notice"></view>
						<text v-if="unReadFlag" class="point"></text>
					</view>
					<view class="search">
						<view class="iconfont iconsousuohome search-icon"></view>
						<view class="home-search-text">搜索商品名称</view>
						<view class="search-black">搜索</view>
					</view>
				</view>
			</template>
			<view :class="[isSearch?'main-component':'']">
				<view v-for="(item,index) in dragList" :key="index">
					<base-component ref="baseComponent" :record="item" :isSearch="isSearch"></base-component>
				</view>
				<view v-if="nowOrgLv!='gk'" class="home-window-wrapper">
					<image v-if="!hideWindowFlag" src="~@/static/img/home.png" class="home-window" @tap="jumpToShare"></image>
					<view v-if="!hideWindowFlag" class="iconfont iconguanbi4" @tap="hideWindowFlag=!hideWindowFlag"></view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view v-if="nowOrgLv=='gk'" class="home-window-wrapper">
					<image v-if="!hideWindowFlag" src="~@/static/img/home2.png" class="home-window" @tap="jumpToRegister"></image>
					<view v-if="!hideWindowFlag" class="iconfont iconguanbi4" @tap="hideWindowFlag=!hideWindowFlag"></view>
				</view>
				<!-- #endif -->
				<view class="main-block"></view>
			</view>

			<foot-bar v-if="readyFlg" :current="selectedIndex"></foot-bar>
			<!-- <loading></loading> -->
		</view>
		<!--开屏组件-->
		<spread-tail :showInfo="showInfo" :memberFlag="nowOrgLv == 'gk'" :isInitSpred="spreadInitFlag"></spread-tail>
		<tui-modal></tui-modal>
		<loading></loading>
	</view>
</template>
<script>
	import spreadTail from '@/components/spreadTail/spreadTail.vue'
	import baseComponent from '@/components/baseComponent/baseComponent'
	import footBar from "@/components/footbar/footbar"
	import mixin from "@/utils/mixin.js"
	import {
		mapState
	} from 'vuex';
	export default {
		mixins: [mixin],
		components: {
			baseComponent,
			footBar,
			spreadTail,
		},
		data() {
			return {
				hideWindowFlag:false,
				selectedIndex: 0,
				dragList: [],
				pageId: '',
				showType: '0',
				isSearch: false,
				isInitSpred: false,
				showInfo: {}, //开屏信息
				unReadFlag: false, //是否有未读消息
				readyFlg: false,
			}
		},
		computed: {
			...mapState(['spreadInitFlag', 'nowOrgLv']),
		},
		onShow(){
			if(this.$refs.baseComponent) {
				this.$refs.baseComponent.forEach(i => {
					i.autoplay = true;
				})
			}
		},
		onLoad(options) {
			// #ifdef MP-WEIXIN
			this.mpInit(options);
			// #endif
			// #ifndef MP-WEIXIN
			this.readyFlg = true;
			this.notMpInit(options)
			// #endif
		},
		methods: {
			mpInit(options) {
				uni.removeStorageSync('inviterId');
				// 扫二维码打开的方式
				if (options.q) {
					uni.setStorageSync('inviterId', this.$util.getUrlParam(decodeURIComponent(options.q), 'inviterId'));
				// 分享小程序入口方式
				} else if (options.inviterId) {
					uni.setStorageSync('inviterId', options.inviterId);
				}
				// 没有token跳转登录页
				if(!this.$util.getToken()) {
					const that = this;
					// 登录
					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							const params = {
								code: loginRes.code,
								iv: 'mp',
								encryptedData: 'mp',
							};
							console.log(params)
							that.$util.setToken('');
							that.$http.wxLogin(params).then(res => {
								if (res.status == 0) {
									that.$util.setToken(res.data.access_token);
									that.$util.setRefreshToken(res.data.refresh_token);
									that.$http.updateAuthorization({
										agencyId: that.$util.getInviterId(),
									}).then((childRes) => {
										if (childRes.status == 0) {
											that.readyFlg = true;
											//获取用户身份
											that.$http.customerIdentity().then((res) => {
												if (res.status == 0) {
													that.$util.storageIdentity(res);
													that.getSpreadTailInfo();
												}
											})
											that.$util.getDictDataAll();
											that.getJson();
											that.unRead();
										} else {
											that.$util.setToken('');
										}
									}).catch(() => {
										that.$util.setToken('');
									});
								}
							})
						},
						fail: function(res) {
							that.userLoginClick=false;
						}
					})
				// 如果有token 且有邀请人信息，更新
				} else {
					this.readyFlg = true;
					if (uni.getStorageSync('inviterId')) {
						this.$http.updateAuthorization({agencyId: uni.getStorageSync('inviterId')});
					}
					this.getJson();
					this.getSpreadTailInfo();
					this.unRead();
				}
			},
			notMpInit(options) {
				if (!this.$util.checkTokenAndInviterId(options)) {
					// 检查token和邀请人信息，无token退出方法
					return;
				}
				// #ifdef H5
				this.$wechat.noShare();
				// #endif
				this.getJson();
				this.getSpreadTailInfo();
				this.unRead();
			},
			jumpToRegister() {
				uni.navigateTo({
					url: '/pages/home/login'
				});
			},
			jumpToShare() {
				uni.navigateTo({
					url: '/packageB/pages/share/share'
				})
			},
			getJson() {
				this.$http.getHomeJson({
					status: '0',
					type: '0',
					current: 1,
					pageSize: 1,
				}).then((res) => {
					if (res.status === 0) {
						const data = [...JSON.parse(res.data.records[0].data).list];
						if (JSON.parse(res.data.records[0].data).list[0].type == 'search') {
							this.isSearch = true;
							this.dragList = data.filter((i, k) => k != 0);
						} else {
							this.dragList = data;
							this.isSearch = false;
						}
						console.log(this.isSearch)
					}
				})
			},
			getSpreadTailInfo() {
				this.$http.getSpreadTail().then((res) => {
					if (res.status == 0) {
						if (res.data != null || Object.keys(res.data).length > 0) {
							this.showInfo = Object.assign({}, res.data);
						}
					} else {
						this.showInfo = {};
					}
				})
			},
			unRead() { //我的消息未读
				this.$http.unRead().then(res => {
					if (res.status === 0) {
						this.unReadFlag = !res.data.isReadedFlag;
					}
				});
			},

		}
	}
</script>

<style lang="scss">
	.home-container {
		padding-bottom: 100rpx;
		color: #333;

		.home-window-wrapper {
			width: 180rpx;
			height: 180rpx;
			position: fixed;
			bottom: 98rpx;
			margin-bottom: env(safe-area-inset-bottom);
			left: 0;
			.home-window {
				width: 100%;
				height: 100%;
			}
			.iconfont {
				position: absolute;
				top: 0;
				right: -14rpx;
				color: #656766;
			}
		}

		.main-component {
			padding-top: 90rpx;
			overflow-y: scroll;
			width: 100%;
			overflow-x: hidden;

			.main-block {
				width: 100%;
				height: calc(20rpx + env(safe-area-inset-bottom));
			}


			// padding-bottom: 20rpx;
			// margin-bottom: constant(safe-area-inset-bottom);
			// margin-bottom: env(safe-area-inset-bottom);
			height: calc(100vh - 90rpx);
		}

		.base-search-header {
			width: 100%;
			height: 90rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;

			.notice-box {
				position: relative;

				.notice {
					font-size: 48rpx;
					margin-right: 20rpx;
					color: #656766;
				}

				.point {
					width: 14rpx;
					height: 14rpx;
					background-color: #656766;
					border-radius: 50%;
					display: block;
					position: absolute;
					top: 0;
					right: 8px;
				}
			}

			.search {
				width: 100%;
				height: 60rpx;
				padding: 0 0 0 16rpx;
				box-sizing: border-box;
				background: #fff;
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				color: #999;
				border-radius: 16rpx;
				border: 1px solid #ABABAB;
				border-right: none;

				.search-icon {
					color: #9C9C9C;
					font-weight: 600;
					margin-right: 18rpx;
				}

				.home-search-text {
					flex: 1;
					font-size: 28rpx;
					color: #A0A0A0;
				}

				.search-black {
					font-size: 28rpx;
					height: 100%;
					padding: 0 32rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #656766;
					border-radius: 16rpx;
					color: #fff;
				}
			}
		}

		.footbar-wrap {
			width: 100%;
			position: fixed;
			z-index: 10000;
			left: 0;
			bottom: 0;
			background: #ccc;
		}
	}
</style>
